<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI检索功能 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        .chat-bubble {
            max-width: 85%;
            padding: 0.75rem 1rem;
            border-radius: 1rem;
            margin-bottom: 1rem;
        }
        .user-bubble {
            background-color: #e2e8f0;
            margin-left: auto;
            border-top-right-radius: 0.25rem;
        }
        .assistant-bubble {
            background-color: #f3f4f6;
            margin-right: auto;
            border-top-left-radius: 0.25rem;
        }
        .search-container {
            background-image: linear-gradient(rgba(230, 57, 70, 0.1), rgba(230, 57, 70, 0.05));
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="fire-red text-white shadow-md">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center py-3">
                    <div class="flex items-center">
                        <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-10 w-10 mr-2">
                        <span class="text-xl font-bold">火灾调查知识库平台</span>
                    </div>
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-2 text-white font-medium bg-red-700 rounded">
                            <i class="fas fa-robot mr-1"></i> AI检索功能
                        </a>
                        <a href="report.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-cockpit.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                        <a href="user-center.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-user mr-1"></i> 个人中心
                        </a>
                    </nav>
                    <div class="flex items-center space-x-2">
                        <a href="login.html" class="text-white hover:text-gray-200 px-2 py-1">
                            <i class="fas fa-sign-in-alt mr-1"></i> 登录
                        </a>
                        <a href="register.html" class="bg-white text-red-600 hover:bg-gray-100 px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus mr-1"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="container mx-auto px-4 py-8">
            <h1 class="text-2xl font-bold mb-6">AI智能检索</h1>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧 - AI助手 -->
                <div class="lg:col-span-3">
                    <!-- 搜索区域 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6 search-container">
                        <div class="flex items-center mb-6">
                            <div class="flex-1">
                                <div class="flex">
                                    <input type="text" placeholder="请输入您的问题或关键词..." class="w-full px-4 py-3 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-base">
                                    <button class="px-6 py-3 bg-red-600 text-white rounded-r-lg hover:bg-red-700 focus:outline-none flex items-center">
                                        <i class="fas fa-search mr-2"></i> 搜索
                                    </button>
                                </div>
                                <div class="mt-2 text-sm text-gray-500">
                                    您可以直接提问或搜索关键词，AI会为您提供精准答案和相关知识推荐
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <span class="text-sm text-gray-600 mr-2">热门搜索:</span>
                            <button class="px-3 py-1 text-sm bg-red-50 text-red-600 rounded-full hover:bg-red-100">电气火灾调查方法</button>
                            <button class="px-3 py-1 text-sm bg-red-50 text-red-600 rounded-full hover:bg-red-100">熔痕分析技术</button>
                            <button class="px-3 py-1 text-sm bg-red-50 text-red-600 rounded-full hover:bg-red-100">火灾现场物证收集</button>
                            <button class="px-3 py-1 text-sm bg-red-50 text-red-600 rounded-full hover:bg-red-100">消防新规解读</button>
                        </div>
                    </div>
                    
                    <!-- 对话区域 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-xl font-semibold">AI对话</h2>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200">
                                <i class="fas fa-redo-alt mr-1"></i> 清空对话
                            </button>
                        </div>
                        
                        <!-- 对话内容 -->
                        <div class="h-96 overflow-y-auto mb-4 p-4 bg-gray-50 rounded-lg">
                            <!-- 欢迎消息 -->
                            <div class="chat-bubble assistant-bubble">
                                <div class="flex items-start">
                                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2 flex-shrink-0">
                                        <i class="fas fa-robot text-red-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium mb-1">火调AI助手</p>
                                        <p class="text-gray-700">您好！我是火灾调查知识库AI助手，可以为您提供火灾调查相关知识解答和资料检索。请问有什么可以帮助您的吗？</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 用户消息 -->
                            <div class="chat-bubble user-bubble">
                                <div class="flex items-start justify-end">
                                    <div>
                                        <p class="font-medium mb-1 text-right">您</p>
                                        <p class="text-gray-700">如何区分电气火灾中的一次熔痕和二次熔痕？</p>
                                    </div>
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center ml-2 flex-shrink-0">
                                        <i class="fas fa-user text-blue-600"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- AI回复 -->
                            <div class="chat-bubble assistant-bubble">
                                <div class="flex items-start">
                                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2 flex-shrink-0">
                                        <i class="fas fa-robot text-red-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium mb-1">火调AI助手</p>
                                        <p class="text-gray-700 mb-2">区分电气火灾中的一次熔痕和二次熔痕是火灾调查中的关键技术。两者的主要区别如下：</p>
                                        
                                        <p class="font-medium text-gray-700 mt-3">二次熔痕特征：</p>
                                        <ul class="list-disc pl-5 text-gray-700 mb-2">
                                            <li>由电气故障（如短路）产生的高温电弧熔化金属导线形成</li>
                                            <li>熔珠表面光滑、圆润，边缘清晰</li>
                                            <li>熔痕周围有明显的电弧烧蚀痕迹</li>
                                            <li>截面显微观察可见明显的树枝状晶体结构</li>
                                        </ul>
                                        
                                        <p class="font-medium text-gray-700 mt-3">一次熔痕特征：</p>
                                        <ul class="list-disc pl-5 text-gray-700 mb-2">
                                            <li>由外部火灾热量熔化导线形成，不是电气故障引起</li>
                                            <li>熔珠表面粗糙、不规则</li>
                                            <li>熔痕周围无明显的电弧烧蚀痕迹</li>
                                            <li>截面显微观察晶体结构不明显或呈等轴晶结构</li>
                                        </ul>
                                        
                                        <p class="text-gray-700 mt-3">区分这两种熔痕对确定火灾是由电气故障引起（二次熔痕）还是外部火灾导致电气设备损坏（一次熔痕）至关重要。</p>
                                        
                                        <div class="mt-4 p-3 bg-blue-50 rounded-md">
                                            <p class="font-medium text-blue-700 text-sm">相关知识推荐：</p>
                                            <ul class="mt-2 space-y-2">
                                                <li class="flex items-center">
                                                    <i class="far fa-file-alt text-blue-600 mr-2"></i>
                                                    <a href="#" class="text-blue-600 hover:underline text-sm">《电气火灾调查分析技术规程》第6章：熔痕分析</a>
                                                </li>
                                                <li class="flex items-center">
                                                    <i class="far fa-file-alt text-blue-600 mr-2"></i>
                                                    <a href="#" class="text-blue-600 hover:underline text-sm">《熔痕显微分析技术指南》</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 输入区域 -->
                        <div class="flex">
                            <div class="flex-1 relative">
                                <textarea placeholder="请输入您的问题..." class="w-full px-4 py-3 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-red-500 resize-none h-14"></textarea>
                                <div class="absolute right-2 bottom-2 flex space-x-1">
                                    <button class="p-1 text-gray-400 hover:text-gray-600">
                                        <i class="far fa-image"></i>
                                    </button>
                                    <button class="p-1 text-gray-400 hover:text-gray-600">
                                        <i class="far fa-file"></i>
                                    </button>
                                </div>
                            </div>
                            <button class="px-6 py-3 bg-red-600 text-white rounded-r-lg hover:bg-red-700 focus:outline-none">
                                发送
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧 - 搜索历史和推荐 -->
                <div class="lg:col-span-1">
                    <!-- 搜索历史 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-semibold">搜索历史</h2>
                            <button class="text-sm text-gray-500 hover:text-gray-700">
                                <i class="fas fa-trash-alt mr-1"></i> 清空
                            </button>
                        </div>
                        <div class="space-y-3">
                            <div class="p-2 hover:bg-gray-50 rounded-md">
                                <p class="text-sm text-blue-600">如何区分电气火灾中的一次熔痕和二次熔痕？</p>
                                <p class="text-xs text-gray-500 mt-1">2023-11-12 10:30</p>
                            </div>
                            <div class="p-2 hover:bg-gray-50 rounded-md">
                                <p class="text-sm text-blue-600">火灾现场物证收集的关键步骤</p>
                                <p class="text-xs text-gray-500 mt-1">2023-11-10 15:45</p>
                            </div>
                            <div class="p-2 hover:bg-gray-50 rounded-md">
                                <p class="text-sm text-blue-600">建筑火灾蔓延规律</p>
                                <p class="text-xs text-gray-500 mt-1">2023-11-08 09:20</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐阅读 -->
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h2 class="text-lg font-semibold mb-4">推荐阅读</h2>
                        <div class="space-y-4">
                            <div class="border-b pb-3">
                                <h3 class="font-medium mb-1">《电气火灾调查实务指南》</h3>
                                <p class="text-sm text-gray-600 mb-2">详细介绍电气火灾调查的实践方法和技术要点，包含大量案例分析。</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">消防技术出版社</span>
                                    <a href="#" class="text-blue-600 text-sm hover:underline">阅读</a>
                                </div>
                            </div>
                            
                            <div class="border-b pb-3">
                                <h3 class="font-medium mb-1">《火灾物证鉴定新技术》</h3>
                                <p class="text-sm text-gray-600 mb-2">介绍火灾物证鉴定的最新技术和方法，帮助准确判断火灾原因。</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">公安部消防局</span>
                                    <a href="#" class="text-blue-600 text-sm hover:underline">阅读</a>
                                </div>
                            </div>
                            
                            <div>
                                <h3 class="font-medium mb-1">《火灾调查技术规范》解读</h3>
                                <p class="text-sm text-gray-600 mb-2">深入解读最新版火灾调查技术规范，明确各项调查要求和标准。</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-500">消防标准委员会</span>
                                    <a href="#" class="text-blue-600 text-sm hover:underline">阅读</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <footer class="bg-gray-800 text-white py-8 mt-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关于我们</h3>
                        <p class="text-gray-400 text-sm">火灾调查知识库平台致力于提供全面的火灾调查知识和智能工具，助力消防安全工作的开展。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">快速链接</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><a href="#" class="hover:text-white">首页</a></li>
                            <li><a href="#" class="hover:text-white">知识检索</a></li>
                            <li><a href="#" class="hover:text-white">知识图谱</a></li>
                            <li><a href="#" class="hover:text-white">火调报告</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">联系我们</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><i class="fas fa-envelope mr-2"></i> contact@firekb.com</li>
                            <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                            <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区学院路消防大厦</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关注我们</h3>
                        <div class="flex space-x-3">
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-qq"></i>
                            </a>
                        </div>
                        <p class="text-gray-400 text-sm mt-3">扫描二维码关注公众号</p>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-4 text-center text-gray-400 text-sm">
                    <p>© 2023 火灾调查知识库平台 版权所有</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue初始化代码
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 